<template>
  <view class="content">
    <u-tabs :list="tabsList" :scrollable="false" :current="avtiveTab" @click="changeTab"></u-tabs>
    <view class="list">
      <view v-for="(item, index) in list" :key="index">
        <view class="item" @click="goInfo(item)">
          <view class="u-line-1 item-desc-title">{{ item.sealName || '' }}</view>
          <view class="item-desc-time">{{ $u.timeFrom(new Date(item.createTime).getTime(), 'yyyy-mm-dd') }}<u-icon name="arrow-right"></u-icon></view>
        </view>
      </view>
      <u-loadmore v-if="list.length === 0" status="nomore" nomoreText="暂无数据" />
      <u-loadmore v-if="refreshing" status="loading" loading-text="加载中..." />
      <u-loadmore v-if="finished && list.length > 0" status="nomore" nomoreText="我是有底线的" />
    </view>
  </view>
</template>

<script>
import { mapGetters } from 'vuex'
import toolApi from '../request/api/tool'
import sealApplyApi from '../request/api/sealApply'
import config from '../request/config'
export default {
  data() {
    return {
      timer: null,
      list: [], // 列表数据
      finished: false, // 是否已加载全部数据
      refreshing: false, // 是否正在刷新
      params: {
        pageNum: 1,
        pageSize: 10,
      },
      total: 0,
      baseUrl: config.baseUrl,
      avtiveTab: 0,
      tabsList: [{ name: '审批中' }, { name: '已通过' }, { name: '不通过' }],
    }
  },
  computed: {
    ...mapGetters('userInfo', ['user']),
  },
  onLoad(option) {
    this.getList()
  },
  // 下拉刷新
  onPullDownRefresh() {
    this.params.pageNum = 1
    this.list = []
    this.getList()
  },
  // 上划加载
  onReachBottom() {
    if (this.list.length < this.total) {
      this.getList()
    }
  },
  methods: {
    async changeTab({ index }) {
      this.avtiveTab = index
      this.params.pageNum = 1
      this.list = []
      this.getList()
    },
    async getList() {
      this.refreshing = true
      this.params.approvalStatus = this.avtiveTab
      // 查询指定申请人的数据
      this.params.applicantId = this.user.userId
      try {
        var { rows, total } = await sealApplyApi.getSealApplyList(this.params)
      } catch (error) {
        return
      } finally {
        this.refreshing = false
        uni.stopPullDownRefresh()
      }
      this.list = [...this.list, ...rows]
      this.total = total
      if (this.list.length >= this.total) {
        this.finished = true
      } else {
				this.params.pageNum++
      }
    },
    goInfo(item) {
      uni.navigateTo({
        url: `/sealApply/detail?id=${ item.id }`
      });
    }
  }
}
</script>

<style scoped lang="scss">
.list {
  overflow-y: auto;

  .item {
    display: flex;
    justify-content: space-between;
    margin: 0 0 20rpx !important;
    padding: 24rpx;
    background-color: #fff;

    &:last-child {
      margin-bottom: 0;
    }

    .item-desc-title {
      font-size: 32rpx;
    }
    .item-desc-time {
      display: flex;
      font-size: 30rpx;
      color: #909399;
      flex-shrink: 0
    }
  }
}
</style>
